<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: !data? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="!data"></Nodata>
  </div>
</template>

<script>
  import fontSize from "@/utils/fontSize";
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    computed: {
      // ...mapGetters(["echartsColor"]),
    },
    watch: {
      data: "drawLine", // 数值变化是更新图表
      color: "drawLine", // 数值变化是更新图表
    },
    props: {
      color: {
        type: String,
        default: "rgba(9,193,253,",
      },

      data: {
        type: Object,
        default: () => ({
          // name:'',value:0
        })
      },
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          var cw = document.body.clientWidth;
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);
            let option = {
              title: [{
                text: this.data.name,
                left: 'center',
                top: '85%',
                textStyle: {
                  color: '#ffffff',
                  fontSize: fontSize.fontSize(12),
                  // fontFamily: 'cuhei',
                  // fontWeight: 600,

                }
              }],
              series: [
                {
                  type: 'gauge',
                  axisLine: {
                    lineStyle: {
                      width: 4,
                      color: [
                        [
                          0.2, '#42e4fb'
                        ],
                        [
                          0.8, '#3488db'
                        ],
                        [
                          1, '#f9387f'
                        ]
                      ],
                    }
                  },
                  axisLabel: { // 表盘数字样式
                    // color: '#fff',
                    // distance: 20,
                    fontSize: fontSize.fontSize(9),

                  },
                  radius: '96%',
                  markPoint: {
                    // 仪表盘指针圆
                    animation: false,
                    silent: true,
                    data: [{
                      x: '50%',
                      y: '50%',
                      symbol: 'circle',
                      symbolSize: 1,
                      itemStyle: {
                        color: 'rgba(0,0,0,0)',
                      },
                    }, {
                      x: '50%',
                      y: '50%',
                      symbol: 'circle',
                      symbolSize: 0,
                      itemStyle: {
                        color: '#fff'
                      },
                    }],
                  },
                  pointer: {
                    // 仪表盘指针
                    //icon:'none',
                    width: 3,
                    length: "60%",
                    itemStyle: {
                      color: 'auto'
                    },
                  },
                  axisTick: {
                    distance: 0,
                    length: 5,
                    lineStyle: {
                      color: 'auto',
                      width: 2
                    }
                  },
                  splitLine: {
                    distance: 0,
                    length: 4,
                    lineStyle: {
                      color: 'auto',
                      width: 2
                    }
                  },
                  // axisLabel: {
                  //   color: '#3488db',
                  //   distance: 10,
                  //   fontSize: 14
                  // },
                  detail: {
                    //valueAnimation: true,
                    formatter: '{value} %',
                    color: '#ffffff',
                    padding: [10, 0, 0, 0],
                    fontSize: fontSize.fontSize(12),
                  },
                  data: [{
                    value: this.data.value
                  }]
                },
              ]
            };


            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>